<template>
	<view class="goods-details">
		<!-- 商品图片区域 -->
		<view class="details">
			<view class="logo">
				<image :src="goodsDetails.goods_big_logo" mode="aspectFit" style="height: 200px; width: 100%;"></image>
			</view>
			<!-- 商品价格 -->
			<view class="price">
				￥{{goodsDetails.price}}
			</view>
			<!-- 商品名称 -->
			<view class="name">
				{{goodsDetails.name}}
			</view>
			<!-- 购买数量 -->
			<view class="num">
				<text class="tag">数量</text>
				<view class="num-oper">
					<view @tap="reduceNum">-</view>
					<view>{{buyNum}}</view>
					<view @tap="addNum">+</view>
				</view>
			</view>
			<!-- 商品信息 -->
			<view class="info">
				<view class="brand">
					<text class="tag">品牌</text>{{goodsDetails.brandname}}
				</view>
				<view class="type">
					<text class="tag">类别</text>{{goodsDetails.cat_one_name}}
				</view>
				<view class="weight">
					<text class="tag">重量</text>{{goodsDetails.weight}}g
				</view>
				<view class="uptime">
					<text class="tag">上架时间</text>{{new Date(goodsDetails.add_time * 1000).toLocaleDateString()}}
				</view>
			</view>
			<view class="introduce" v-html="goodsDetails.introduce"></view>
		</view>

		<!-- 底部导航栏 -->
		<uni-goods-nav @click="" style="position: fixed;bottom: 0;width: 100%;"></uni-goods-nav>
	</view>
</template>

<script setup>
	import {ref} from 'vue'
	import {onLoad} from '@dcloudio/uni-app'
	
	// 商品ID
	let goodsId = ref(0)
	// 购买数量
	let buyNum = ref(1)
	
	// 减少数量
	function reduceNum() {
		if(buyNum.value > 1) {
			buyNum.value--
		}
	}
	
	// 增加数量
	function addNum() {
		if(buyNum.value < goodsDetails.value.number) {
			buyNum.value++
		}
	}
	
	// 页面加载时获取路由参数
	onLoad((data)=>{
		console.log("商品ID:", data.id)
		goodsId.value = data.id
		getGoodsDetails(data.id)
	})
	
	// 商品详情数据
	let goodsDetails = ref({})
	// 查询商品详情 
	async function getGoodsDetails(id) {
		let res = await uni.$post("/goodInfoById",{id})
		if(res.code == 200) {
			goodsDetails.value = res.goodsList[0]
			// 拼接完整的图片URL
			goodsDetails.value.goods_big_logo = uni.$base_url + goodsDetails.value.goods_big_logo
		}
		console.log(goodsDetails.value)
	}
</script>

<style lang="scss">
	.goods-details {
		background-color: #eee;
		min-height: 100vh;
	}
	
	.details {
		// 修改整体样式
		padding: 0;
		
		// 商品图片区域样式
		.logo {
			background-color: #fff;
			padding: 10px;
			margin-bottom: 10px;
		}
		
		// 商品价格样式
		.price {
			background-color: #fff;
			color: #f00;
			font-size: 18px;
			padding: 15px 10px;
			margin-bottom: 10px;
		}
		
		// 购买数量样式
		.num {
			background-color: #fff;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 15px 10px;
			margin-bottom: 10px;
			
			.tag {
				font-size: 14px;
				color: #fff;
				border: 1px solid #ff0000;
				padding: 2px 4px;
				border-radius: 4px;
				background-color: #ff0000;
				display: inline-block;
				min-width: fit-content;
			}
			
			.num-oper {
				display: flex;
				align-items: center;
				
				view {
					width: 40px;
					height: 40px;
					border: 1px solid #ddd;
					display: flex;
					align-items: center;
					justify-content: center;
					background-color: #fff;
					
					&:nth-child(2) {
						border-left: none;
						border-right: none;
					}
				}
			}
		}
		
		// 商品信息样式
		.info {
			background-color: #fff;
			padding: 15px 10px;
			margin-bottom: 10px;
			
			.brand, .type, .weight, .uptime {
				margin: 10px 0;
				font-size: 14px;
				display: flex;
				
				.tag {
					color: #fff;
					border: 1px solid #ff0000;
					padding: 2px 4px;
					border-radius: 4px;
					background-color: #ff0000;
					display: inline-block;
					min-width: fit-content;
					margin-right: 10px;
					text-align: center;
				}
			}
		}
		
		// 商品名称样式
		.name {
			background-color: #fff;
			color: #333;
			padding: 15px 10px;
			margin-bottom: 0;
			font-size: 16px;
			line-height: 1.5;
		}
		
		// 商品介绍样式
		.introduce {
			background-color: #fff;
			padding: 15px 10px;
			margin-bottom: 60px; // 为底部导航留出空间
		}
	}
	
	// 修复底部导航样式
	.uni-goods-nav {
		background-color: #fff;
	}
</style>